<template>
  <div>
    <div class="container">
      <div id="divChart"></div>
      <div class="divOperation">
        <ul>
          <li
            v-for="(item, index) in operList"
            :key="item.type"
            @click="changeItem($event, index, item.type)"
            :class="index === activeIdx && checkedItem ? 'active' : '' "
          >{{ item.type }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tab-toubleshooting",
  data() {
    return {
      close: false,
      buttons: [],
      activeIdx: 0,
      checkedItem: false,
      operList: [
        {
          type: "E"
        },
        {
          type: "S"
        },
        {
          type: "W"
        },
        {
          type: "N"
        },
        {
          type: "C"
        }
      ],
      barData: [20, 26, 50, 56, 59, 80, 103]
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var myChart = echarts.init(document.getElementById("divChart"));
      var option = {
        title: {
          text: "PTX National Level",
          left: "center",
          top: "10"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          position: "top"
        },
        yAxis: {
          type: "category",
          data: ["1stA", "1stF", "InarmA", "InarmF", "A", "F", "T"]
        },
        series: [
          {
            type: "bar",
            data: this.barData,
            label: {
              //设置柱状图上显示  对应值
              show: false,
              position: "right",
              color: "red"
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var index = params.dataIndex;
                  var colors = [
                    ["#EABBD1", "#DD93B6", "#CF6598", "#B13770"],
                    ["#EBBED3", "#E19EBD", "#D678A5", "#C74B86"],
                    ["#94F1D8", "#5BEAC2", "#1DDEA9", "#17B286"],
                    ["#ACF4E0", "#78EDCD", "#3CE6B7", "#1CD5A2"],
                    ["#C0C8F1", "#97A3E8", "#6C7DDF", "#4055D5"],
                    ["#C5CEED", "#9BB3DF", "#7388D2", "#4A66C6"],
                    ["#C5CEED", "#9BB3DF", "#7388D2", "#4A66C6"]
                  ];
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: colors[index][0] },
                    { offset: 0.3, color: colors[index][1] },
                    { offset: 0.6, color: colors[index][2] },
                    { offset: 1, color: colors[index][3] }
                  ]);
                },
                barBorderRadius: [0, 8, 8, 0] // 设置柱状图圆角（顺时针左上，右上，右下，左下）
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    changeItem(event, idx, type) {
      this.checkedItem = !this.checkedItem;
      if (this.activeIdx != idx) {
        this.checkedItem = true;
      }
      this.activeIdx = idx;
      if (this.checkedItem) {
        // 过滤单个方向过滤
        console.log(type);
      } else {
        // 加载所有数据
        console.log("All");
      }
    },
    getMedias() {
      /*  navigator
        .mediaDevices
        .enumerateDevices()
        .then(function(devices) {
          let audioDevices = devices.filter(device => device.kind === 'audioinput' && device.deviceId !== "default" && device.deviceId !== "communications");
          let outputDevice = devices[0];
          console.log(audioDevices, devices, outputDevice);
        }) */
      if (navigator.mediaDevices) {
        console.log("getUserMedia supported.");

        var constraints = { audio: true };
        var chunks = [];

        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            console.log(stream);
            var mediaRecorder = new MediaRecorder(stream);

            visualize(stream);

            record.onclick = function() {
              mediaRecorder.start();
              console.log(mediaRecorder.state);
              console.log("recorder started");
              record.style.background = "red";
              record.style.color = "black";
            };

            stop.onclick = function() {
              mediaRecorder.stop();
              console.log(mediaRecorder.state);
              console.log("recorder stopped");
              record.style.background = "";
              record.style.color = "";
            };

            mediaRecorder.onstop = function(e) {
              console.log("data available after MediaRecorder.stop() called.");

              var clipName = prompt("Enter a name for your sound clip");

              var clipContainer = document.createElement("article");
              var clipLabel = document.createElement("p");
              var audio = document.createElement("audio");
              var deleteButton = document.createElement("button");

              clipContainer.classList.add("clip");
              audio.setAttribute("controls", "");
              deleteButton.innerHTML = "Delete";
              clipLabel.innerHTML = clipName;

              clipContainer.appendChild(audio);
              clipContainer.appendChild(clipLabel);
              clipContainer.appendChild(deleteButton);
              soundClips.appendChild(clipContainer);

              audio.controls = true;
              var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
              chunks = [];
              var audioURL = URL.createObjectURL(blob);
              audio.src = audioURL;
              console.log("recorder stopped");

              deleteButton.onclick = function(e) {
                evtTgt = e.target;
                evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
              };
            };

            mediaRecorder.ondataavailable = function(e) {
              chunks.push(e.data);
            };
          })
          .catch(function(err) {
            console.log("The following error occurred: " + err);
          });
      }
    },
    record() {
      function record() {
        window.navigator.mediaDevices
          .getUserMedia({
            // audio: true
            audio: {
              sampleRate: 44100, // 采样率
              channelCount: 2, // 声道
              volume: 1.0 // 音量
            }
          })
          .then(mediaStream => {
            console.log(mediaStream);
            beginRecord(mediaStream);
          })
          .catch(err => {
            // 如果用户电脑没有麦克风设备或者用户拒绝了，或者连接出问题了等
            // 这里都会抛异常，并且通过err.name可以知道是哪种类型的错误
            console.error(err);
          });
      }
    }
  },
  computed: {}
};
</script>
<style scoped>
.container {
  height: 410px;
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.container #divChart {
  flex: 2;
}

.container .divOperation {
  flex: 1;
  margin: 0 auto;
}

.container .divOperation ul {
  position: relative;
  padding-top: 20px;
}

.container .divOperation ul::after {
  content: "";
  display: block;
  clear: both;
}

.container .divOperation ul li {
  float: left;
  width: 45px;
  height: 25px;
  line-height: 25px;
  background: coral;
  margin: 10px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  color: rgb(100, 73, 216);
  font-weight: bold;
}

.container .divOperation ul li:hover {
  opacity: 0.6;
}

.container .divOperation ul li.active {
  background: rgb(233, 199, 65);
  opacity: 1;
  color: #fff;
}
</style>
